<template>
  <v-card class="flex flex-column">
    <v-card-title class="align-start flex p-5">
      <span class="text-[#736B7D] font-semibold flex-1 whitespace-normal leading-5">
        {{ t('message.dashboard.voting.title') }}
      </span>

      <v-btn icon small flat class="mt-n2 me-n3">
        <v-icon color="#736B7D">mdi-dots-vertical</v-icon>
      </v-btn>
    </v-card-title>

    <v-card-text class="flex">
      <v-list
        v-if="meetingSchedule.length > 0"
        class="flex-1 pt-0 mt-n1 xs:overflow-hidden"
      >
        <v-list-item
          v-for="(data, index) in meetingSchedule"
          :key="index"
          :class="`d-flex align-center px-0 ${index > 0 ? 'mt-3' : ''}`"
        >
          <div class="flex flex-row items-center">
            <v-list-item-avatar size="38" class="mr-3">
              <shark-logo />
            </v-list-item-avatar>

            <div
              class="d-flex flex-row align-center justify-space-between flex-wrap xs:flex-1 xs:!flex-wrap"
              @click="toVote(data.id)"
            >
              <div class="w-[70%] xs:w-full">
                <v-list-item-title
                  class="text-lg font-medium text-[#736B7D] xs:overflow-visible whitespace-pre-wrap cursor-pointer"
                >
                  {{ data.title }}
                </v-list-item-title>
                <div class="d-flex align-center">
                  <v-icon size="14" class="me-1" color="#928D99">
                    mdi-calendar-blank-outline
                  </v-icon>
                  <v-list-item-subtitle class="text-xs text-[#928D99]">
                    {{ data.dateAndTime }}
                  </v-list-item-subtitle>
                </div>
              </div>

              <v-chip
                small
                :color="data.chipColor"
                :class="`v-chip-light-bg ${data.chipColor}--text font-semibold mt-1`"
              >
                {{ data.chipText }}
              </v-chip>
            </div>
          </div>
        </v-list-item>
      </v-list>
      <div v-else class="text-gray-400 text-lg text-center flex-1 self-center">
        {{ t('message.dashboard.voting.empty') }}
      </div>
    </v-card-text>
  </v-card>
</template>

<script setup lang="ts">
import sharkLogo from '@/icons/shark-logo.svg?component';
import { proposalApi } from '@/api/dashboard';
import { reactive } from 'vue';
import moment from 'moment';
import { useI18n } from 'vue-i18n';

const meetingSchedule = reactive<any>([]);

const { t } = useI18n();

proposalApi().then((res: any) => {
  console.log('proposalApi res:', res);
  res.forEach((item: any) => {
    const proposal = {
      id: item.proposalsId,
      title: item.title,
      chipText: item.state,
      chipColor: item.state === 'closed' ? 'error' : 'primary',
      dateAndTime:
        moment(parseInt(item.start) * 1000).format('MM/DD, YYYY') +
        ' - ' +
        moment(parseInt(item.end) * 1000).format('MM/DD, YYYY'),
    };
    meetingSchedule.push(proposal);
  });
});

const toVote = (id: string) => {
  window.open('https://vote.sdao.win/#/proposal/' + id, '__blank');
};
</script>

<style scoped lang="scss">
::v-deep .v-list-item__content {
  flex: 1;
}
</style>
